<template>
  <div class="row">
    <!-- 按钮Button -->

<!-- <div class="button">
  <div class="row">
      <vb-button>Default</vb-button>
      <vb-button type="primary">Primary</vb-button>
      <vb-button type="success">Success</vb-button>
      <vb-button type="info">Info</vb-button>
      <vb-button type="warning">Warning</vb-button>
      <vb-button type="danger">Danger</vb-button>
  </div>
    <div class="row">
      <vb-button plain>Default</vb-button>
      <vb-button plain type="primary">Primary</vb-button>
      <vb-button plain type="success">Success</vb-button>
      <vb-button plain type="info">Info</vb-button>
      <vb-button plain type="warning">Warning</vb-button>
      <vb-button plain type="danger">Danger</vb-button>
    </div>
    <div class="row">
      <vb-button round>Default</vb-button>
      <vb-button round type="primary" @click="doSothing">Primary</vb-button>
      <vb-button round type="success">Success</vb-button>
      <vb-button round type="info">Info</vb-button>
      <vb-button round type="warning">Warning</vb-button>
      <vb-button round type="danger">Danger</vb-button>
    </div>

    <div class="row">
      <vb-button
        iconfont
        iconClass="vb-icon-check"
        spanClass="vb-icon-sapn"
        round
        >Default</vb-button
      >
      <vb-button
        iconfont
        iconClass="vb-icon-check"
        spanClass="vb-icon-sapn"
        round
        type="primary"
        >Primary</vb-button
      >
      <vb-button
        iconfont
        iconClass="vb-icon-check"
        spanClass="vb-icon-sapn"
        round
        type="success"
        >Success</vb-button
      >
      <vb-button
        iconfont
        iconClass="vb-icon-check"
        spanClass="vb-icon-sapn"
        round
        type="info"
        >Info</vb-button
      >
      <vb-button
        iconfont
        iconClass="vb-icon-check"
        spanClass="vb-icon-sapn"
        round
        type="warning"
        >Warning</vb-button
      >
      <vb-button
        iconfont
        iconClass="vb-icon-check"
        spanClass="vb-icon-sapn"
        round
        type="danger"
        >Danger</vb-button
      >
    </div>
    <div class="row">
      <vb-button circle> 拆 </vb-button>
      <vb-button circle type="primary"> 拆 </vb-button>
      <vb-button circle type="success"> 拆 </vb-button>
      <vb-button circle type="info"> 拆 </vb-button>
      <vb-button circle type="warning"> 拆 </vb-button>
      <vb-button circle type="danger"> 拆 </vb-button>
    </div>

    <div class="row">
      <vb-button circle iconClass="vb-icon-check" iconfont> </vb-button>
      <vb-button circle iconClass="vb-icon-search" iconfont type="primary">
      </vb-button>
      <vb-button circle iconClass="vb-icon-edit" iconfont type="success">
      </vb-button>
      <vb-button circle iconClass="vb-icon-star-off" iconfont type="warning">
      </vb-button>
      <vb-button circle iconClass="vb-icon-message" iconfont type="danger">
      </vb-button>
    </div> 
    <div class="row">
      <vb-button circle disabled iconClass="vb-icon-check" iconfont> </vb-button>
      <vb-button circle disabled iconClass="vb-icon-search" iconfont type="primary">
      </vb-button>
      <vb-button circle disabled iconClass="vb-icon-edit" iconfont type="success">
      </vb-button>
      <vb-button circle disabled iconClass="vb-icon-star-off" iconfont type="warning">
      </vb-button>
      <vb-button circle disabled iconClass="vb-icon-message" iconfont type="danger">
      </vb-button> 
</div>
</div> -->
    <!-- dialog -->
    <!-- <vb-button @click="dialogVisible=true">click here</vb-button>
    <vb-dialog 
    :visible.sync="dialogVisible"
    >
      <template v-slot:title>
        <span>Tips</span>
      </template>
      <template v-slot:content>
        <span>this is content</span>
      </template>
      <template v-slot:footer>
        <vb-button @click="dialogVisible=false">cancel</vb-button>
        <vb-button type='primary' @click="dialogVisible=false">confirm</vb-button>
      </template>
    </vb-dialog>  -->

     <!-- <vb-button type='primary' @click="dialogVisible=true">点击</vb-button>
    <vb-dialog width="40%" top="25vh" :visible.sync='dialogVisible'>
      <template v-slot:title>
        <span>Tips</span>
      </template>

      <template v-slot:content>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </template>

      <template v-slot:footer>
        <vb-button @click="dialogVisible=false">cancel</vb-button>
        <vb-button type="primary" @click="dialogVisible=false">confirm</vb-button>
      </template>
    </vb-dialog> -->
    <!-- <vb-input placehodler='please input' ></vb-input>
    <vb-input placehodler='please input' disabled ></vb-input> -->
    <!-- <vb-input placehodler='please input' :value='userName' @input='userName=传过来的数据' ></vb-input>v-model的简写,子要子组件向父组件传递一个input事件 -->
     <!-- <vb-input placehodler='please input' v-model='userName' ></vb-input>
    <vb-input placehodler='please input' v-model="userName" clearable  ></vb-input>
  <vb-input placehodler='please input' showPassword  v-model="password" type='password'></vb-input> -->

    <!-- <vb-switch v-model="valueGray"
    name='userName'>
    </vb-switch> -->

    <!-- <vb-switch
      v-model="valueRed"
      activeColor="#13ce66"
      inactiveColor="#ff4949"
      name='userName'
      width='50'
    >
    </vb-switch> -->
    <!-- <vb-switch
      v-model="valueGray"
      activeText="Pay by month"
      inactiveText="Pay by year"
    >

    </vb-switch>

    <vb-switch
      activeColor="#13ce66"
      inactiveColor="#ff4949"
      activeText="Pay by month"
      inactiveText="Pay by year"
    >
    </vb-switch> -->
     <!-- <vb-radio
      v-model="radio"
      label="1"
    >Option A</vb-radio>
    <vb-radio
      v-model="radio"
      label="2"
    >Option B</vb-radio> -->
 
    <radio-group v-model='radio'>
      <vb-radio label="1">man</vb-radio>
      <vb-radio label="2">women</vb-radio>
      <vb-radio label="3">ladyboy</vb-radio>
    </radio-group>

    <!-- <vb-radio v-model='gender' label="1">girl</vb-radio>
    <vb-radio v-model='gender' label="2">boy</vb-radio> -->
    <!-- <vb-form :model='form'>
      <vb-formitem label="Username">
          <vb-input v-model="form.name"></vb-input>
      </vb-formitem>
       <vb-formitem label="Password">
          <vb-input v-model="form.password" ></vb-input>
      </vb-formitem>
      <div class="row" style="margin:20px">
          <vb-button >cancel</vb-button>
          <vb-button type='primary'>confirm</vb-button>
      </div>
    </vb-form> -->

  </div>
</template>

<script>
import Button from "./components/Button.vue";
import Radio from "./components/Radio.vue";
import RadioGroup from "./components/RadioGroup.vue";
export default {
  components: { Button, RadioGroup, Radio },
  data() {
    return {

      userName: "",
      password: "",
      dialogVisible:false,
      //switch是否打开
      valueGray: true,
      valueRed: true,
      radio: "1",

      gender: "1",
      form:{},
    };
  },
  methods: {
    handleClose() {
      this.dialogVisibile = false;
    },
  },
};
</script>

<style lang='scss' scoped>
.row {
   //display: flex;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

</style>
